<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="place" >

</div>

<div class="formbody" id="list_div">

    <div class="formtitle"><span>用户列表</span>
        <table style="margin-left: 80px"><tr>
            <td v-for="admin in adminList"><input type="radio" name="admin" v-bind:value="admin.aid" @click="getadminrole(admin.aid)" >{{admin.aname}}</td>
        </tr>
        </table>
    </div>

    <div class="toolsli">
        <ul class="toollist">
            <li v-for="roles in rolesList"><img src="images/i01.png" /><h2><input type="checkbox" name="role" v-model="role" v-bind:value="roles.id">{{roles.rolename}}</h2></li>

        </ul>
        <span class="tooladd"><img src="images/add.png" title="确认" @click="updateadminrole()"/></span>
    </div>

</div>
</body>
<script language="JavaScript" src="js/vue.min.js"></script>
<script language="JavaScript" src="js/axios.min.js"></script>
<script>
     var vm = new Vue({
        el:"#list_div",
         data:{
           adminList:[],
           rolesList:[],
           role:[],
           admin:'',
         },
         created(){
            this.loadadmin();
            this.loadroles();
         },
         methods:{
            loadadmin:function () {
                axios.get("/admin",null).then(function (obj) {
                    if(obj.status==200){
                        var pageResult=obj.data;
                        if(pageResult.object!=null){
                            vm.adminList=pageResult.object;
                        }
                    }
                }).catch(function (obj) {
                    alert("请求失败")
                })
            },
            loadroles:function () {
                axios.get("/roles",null).then(function (obj) {
                    if(obj.status==200){
                        var pageResult=obj.data;
                        if(pageResult.object!=null){
                            vm.rolesList=pageResult.object;
                        }
                    }
                }).catch(function (obj) {
                    alert("请求失败")
                })
            },
            getadminrole:function (aid) {
                vm.admin=aid;
                axios.get("/roles/"+aid,null).then(function (obj) {
                    if(obj.status==200){
                        var pageResult=obj.data;
                        if(pageResult.object!=null){
                            vm.role=pageResult.object;
                        }
                    }
                }).catch(function (obj) {
                    alert("请求失败")
                })
            },
            updateadminrole:function () {
                axios.put("/admin?aid="+vm.admin+"&role="+vm.role,null).then(function (obj) {
                    if(obj.status==200){
                        var pageResult=obj.data;
                        if(pageResult.state==200){
                            alert("修改成功");
                        }
                    }
                }).catch(function (obj) {
                    alert("请求失败")
                })
            }
         }
     });
</script>
</html>